import React, { Component } from 'react';

import Top_tar from '../top_bar/top_bar'
import Main_nav from '../main_nav/main_nav'
import News from '../news/news'
import Menu from '../menu/menu'
import Homepage_list from '../homepage/homepage_list/homepage_list'

import { Modal } from 'antd';
import './product.css'
import Img_2 from '../images/1.jpg'
import Img_3 from '../images/3.jpg'
import Img_4 from '../images/4.jpg'
import Img_5 from '../images/5.jpg'
import Img_6 from '../images/6.jpg'
import Img_7 from '../images/7.jpg'

// import { useTranslation } from 'react-i18next';//这种方法只能适用于函数式组件
import { allProduct } from '../../utils/api'
import { Translation } from 'react-i18next';

// console.log(Translation)
export default class Product extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            choice: [
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                }
            ],
            // title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
            // red_money: '45.99',
            // black_money: '91.98',
            allSize: [
                {
                    size: '小号'
                }
            ],
            describe: [
                {
                    sentence: '关于3D染料升华技术，使我们能够生产这些疯狂而充满活力的产品，而不会褪色，破裂，剥落或剥落'
                },
                {
                    sentence: '真棒时尚连帽衫时尚设计的连帽衫可以为您的日常生活增添乐趣'
                },
                {
                    sentence: '您是与众不同的人，需要不同的连帽运动衫'
                },
            ],
            multipleChoice: [
                {
                    describe: '男女皆宜的男女皆宜帽衫'
                },
                {
                    describe: '男涤棉棉质连帽衫，酷连帽衫'
                },
                {
                    describe: '没有天鹅绒，中等薄，重量轻'
                },
                {
                    describe: '光滑，舒适，柔软，透气和耐用，可让您保持凉爽'
                },
                {
                    describe: '这是给您的家人和朋友特别是青少年的特别礼物。'
                },
                {
                    describe: '洗涤方法：手洗和机洗。'
                },
                {
                    describe: '注意：由于手工测量，尺寸可能有2厘米/1英寸的误差，谢谢您的理解！'
                },
                {
                    describe: '服务：如果您不满意，请给我们发送电子邮件。'
                }
            ],
            data: [
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                },
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                },
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                },
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                },
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                },
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                },
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                },
                {
                    title: 'HAHA小丑运动衫秋季黑色3D印花连帽外套',
                    red_money: '45.99',
                    black_money: '91.98',
                },
            ],
        }
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    goProductM = () => {
        this.props.history.push('/product_details')
    }
    goAddressM = () => {
        this.props.history.push('/delivery_address')
    }

    render() {
        // const { t, i18n } = useTranslation(); //这种方法只能适用于函数式组件
        // const { data1 } = this.props.location.state.id

        return (
            <div>
                <Top_tar {...this.props} />
                <Main_nav {...this.props} />

                <div className="fancy-box">
                    <div className="fancy-box-stage">
                        <div className="fancy-box-top">
                            <div className="nav_arrows">
                                <a href="#" title="上一个" className="breadcrumb_link">
                                    <font style={{ verticalAlign: 'inherit' }}>
                                        <font style={{ verticalAlign: 'inherit' }}>上一个</font>
                                    </font>
                                </a>
                                <span>|</span>
                                <a href="#" title="下一个" className="breadcrumb_link">
                                    <font style={{ verticalAlign: 'inherit' }}>
                                        <font style={{ verticalAlign: 'inherit' }}>下一个</font>
                                    </font>
                                </a>
                            </div>
                        </div>
                        {
                            this.state.choice.map((item, index) => {
                                return (
                                    <div key={index}>
                                        <div className="fancy-box-left" >
                                            <img src={Img_2} alt="" />
                                        </div>
                                        <div className="fancy-box-right">
                                            <div className="product-name">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>{item.title}</font>
                                                </font>
                                            </div>
                                            <div className="modal-price">
                                                <span className="sale-price-one">
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>$ {item.red_money}</font>
                                                    </font>
                                                </span>
                                                <span className="sale-price-two">
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>$ {item.black_money}</font>
                                                    </font>
                                                </span>
                                            </div>
                                            <div className="price-save">
                                                <span className="price-save-one">
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>节省50%</font>
                                                    </font>
                                                    <span className="price-save-two">
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font style={{ verticalAlign: 'inherit' }}>（$ 45.99）</font>
                                                        </font>
                                                    </span>
                                                </span>
                                            </div>
                                            <div className="swatch_options">
                                                <div className="swatch clearfix" data-option-index="0">
                                                    <div className="option_title">
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font style={{ verticalAlign: 'inherit' }}>尺寸</font>
                                                        </font>
                                                    </div>
                                                    {
                                                        this.state.allSize.map((item, index) => {
                                                            return (
                                                                <div className="swatch-element s-swatch available" key={index}>
                                                                    <label>
                                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                                            <font style={{ verticalAlign: 'inherit' }}>{item.size}</font>
                                                                        </font>
                                                                    </label>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                            <div className="purchase-details_quantity">
                                                <div className="details_quantity">
                                                    <label className="num">
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font style={{ verticalAlign: 'inherit' }}>数量</font>
                                                        </font>
                                                    </label>
                                                    <span className="ss-icon-one  product-minus">
                                                        <span className="icon-minus">-</span>
                                                    </span>
                                                    <input type="tel" min="1" size="2" className="quantity-one quantity-plus" />
                                                    <span className="ss-icon-one product-plus">
                                                        <span className="icon-plus">+</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="sale-details_buttons">
                                                <button type="submit" className="button-item-one">
                                                    <span className="text">
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font style={{ verticalAlign: 'inherit' }}>添加到购物车</font>
                                                        </font>
                                                    </span>
                                                </button>
                                                <div className="button-item">
                                                    <button type="button" className="button-item-two"
                                                        onClick={this.goAddressM.bind(this)}
                                                    >
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font style={{ verticalAlign: 'inherit' }}>立即购买</font>
                                                        </font>
                                                    </button>
                                                </div>
                                            </div>
                                            <div className="description-bottom">
                                                <div className="a-spacing-mini">
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>精细印刷</font>
                                                    </font>
                                                </div>
                                                {
                                                    this.state.describe.map((item, index) => {
                                                        return (
                                                            <div className="spacing-mini" key={index}>
                                                                <font style={{ verticalAlign: 'inherit' }}>
                                                                    <font style={{ verticalAlign: 'inherit' }}>{item.sentence}</font>
                                                                </font>
                                                            </div>
                                                        )
                                                    })
                                                }
                                                <p>&nbsp;</p>
                                                <div className="a-spacing-mini">
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>多种选择</font>
                                                    </font>
                                                </div>
                                                {
                                                    this.state.multipleChoice.map((item, index) => {
                                                        return (
                                                            <p className="a-spacing-base" key={index}>
                                                                <font style={{ verticalAlign: 'inherit' }}>
                                                                    <font style={{ verticalAlign: 'inherit' }}>{item.describe}</font>
                                                                </font>
                                                            </p>
                                                        )
                                                    })
                                                }
                                                <p className="a-spacing-base">
                                                    <img src={Img_3} alt="" />
                                                </p>
                                                <p className="a-spacing-base">
                                                    <img src={Img_4} alt="" />
                                                </p>
                                                <p className="a-spacing-base">
                                                    <img src={Img_5} alt="" />
                                                </p>
                                                <p className="a-spacing-base">
                                                    <img src={Img_6} alt="" />
                                                </p>
                                                <p className="a-spacing-base">
                                                    <img src={Img_7} alt="" />
                                                </p>
                                            </div>
                                            <div className="meta"></div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="shopify-section collection-section">
                    <div className="featured_products product-grid">
                        <div className="sixteen columns center homepage_content">
                            <h2 className="title-one">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>相关项目</font>
                                </font>
                            </h2>
                        </div>
                    </div>
                </div>
                <div className="list-collections-three">
                    {
                        this.state.data.map((item, index) => {
                            return (
                                <div className="list-two" key={index} >
                                    <div className="list-collections_two">
                                        <img src={Img_2} alt="" className="img-two"
                                            onClick={this.goProductM.bind(this)}
                                        />
                                    </div>
                                    <div className="item-three">
                                        <div onClick={this.goProductM.bind(this)}>
                                            <div className="produce-name">
                                                {item.title}
                                            </div>
                                            <div className="price">
                                                <span className="red_price">${item.red_money}</span>
                                                <span className="black_price">${item.black_money}</span>
                                            </div>
                                        </div>
                                        <div className="speed_look">
                                            <div className="speed_look_word" onClick={this.showModal} >快速浏览</div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                    <Modal
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        footer={null}
                        width="900px"
                    >
                        <Homepage_list />
                    </Modal>
                </div>

                <News {...this.props} />
                <Menu {...this.props} />
            </div>
        );
    }
}